<template>
    <div class="trade flex">

        <c-box class="left">
            <template slot="title">
                <span class="Limit cur"
                    :class="{selec:isLimit}"
                    v-text="Lang.moduleTitle[lang][0]" />
                <!-- <span class="Market cur" :class="{selec:isMarket}" @click="selectMarket">市价交易</span> -->
                <!-- <span class="Rates cur" v-text="Lang.moduleTitle[lang][1]" /> -->
            </template>
            <template slot="body">

                <div v-if="signed"
                    class="inforbox fcb">
                    <div class="ilbk">
                        <span v-text="Lang.Transaction[lang][0]">最高限价</span>
                        <span v-text="$store.state.trade.fmaxBuyPrice">0</span>
                    </div>
                    <div class="ilbk">
                        <span v-text="Lang.Transaction[lang][1]">最低限价</span>
                        <span v-text="$store.state.trade.fminBuyPrice">0</span>
                    </div>
                    <div class="ilbk">
                        <span v-text="Lang.Transaction[lang][2]">可用法币</span>
                        <span v-text="$store.state.trade.fvirtualwalletFB_KY">0</span>
                    </div>
                    <div class="ilbk">
                        <span v-text="Lang.Transaction[lang][3]">可用交易币</span>
                        <span v-text="$store.state.trade.fvirtualwalletJY_KY">0</span>
                    </div>
                </div>

                <div class="formContainer">
                    <c-operate class="operateCon"
                        :LoginText="Lang.noLogin[lang][0]"
                        :orText="Lang.noLogin[lang][1]"
                        :RegsText="Lang.noLogin[lang][2]"
                        :doDealText="Lang.noLogin[lang][3]"
                        :tradeText="Lang.moduleTitle[lang][2]"
                        :canUse="Lang.moduleTitle[lang][3]"
                        :addB="Lang.moduleTitle[lang][4]"
                        :formUpTitle="Lang.BuyFromTtitle[lang][0]"
                        :formDownTitle="Lang.BuyFromTtitle[lang][1]"
                        :ContrlBtn="Lang.BuyFromTtitle[lang][2]"
                        :isBuyIN="signed" />
                    <c-operate class="operateCon operateRight"
                        :LoginText="Lang.noLogin[lang][0]"
                        :orText="Lang.noLogin[lang][1]"
                        :RegsText="Lang.noLogin[lang][2]"
                        :doDealText="Lang.noLogin[lang][3]"
                        :tradeText="Lang.moduleTitle[lang][2]"
                        :canUse="Lang.moduleTitle[lang][3]"
                        :addB="Lang.moduleTitle[lang][4]"
                        :formUpTitle="Lang.SellFromTtitle[lang][0]"
                        :formDownTitle="Lang.SellFromTtitle[lang][1]"
                        :ContrlBtn="Lang.SellFromTtitle[lang][2]"
                        :isSellIn="signed" />

                </div>

            </template>
        </c-box>

        <c-box class="right">
            <template slot="title">
                <span class="titleText"
                    v-text="Lang.MultipleTile[lang]" />
                <!-- <span class="titleText">15.1558</span>
                <span class="titleText">USDT</span>
                <span class="titleChange">≈</span>
                <span class="titleChange">98.46</span>
                <span class="titleChange">CNY</span> -->
            </template>
            <template slot="body">
                <c-list/>
            </template>
        </c-box>
    </div>
</template>

<script>
import {vpost, kpost, vlink} from '@api'
import Cbox from '../../box.vue'
import Operate from './operate/a.vue'
import List from './list/a'
import Lang from './lang.js'
import {bus} from '../../../../../../main.js'
import {Indicator} from 'mint-ui'
export default {
	name: 'trade',
	data() {
		return {
			isLimit: true,
			isMarket: false,
			formUpTitle: '买入价',
			formDownTitle: '买入量',
			Lang,
			langSelects: [{value: 0, txt: '简体中文'}, {value: 1, txt: 'English'}],
			timing: '', //定时函数
		}
	},
	components: {
		'c-box': Cbox,
		'c-operate': Operate,
		'c-list': List,
	},
	mounted() {
		bus.$on('refresh', text => {
			Indicator.open()
			this.getdata()
		})
		// 0buy - 1 sell
		clearInterval(this.timing);
		this.timing = setInterval(() => {
			this.getdata()
		}, 10 * 1000)

		
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
		signed() {
			return this.$store.state.user.signed
		},
		
	},
	methods: {
		getdata() {
			vpost(vlink.tradek.information, {coinType: this.$store.state.trade.ftrademappingid}).then(re => {
				Indicator.close()
				this.$store.commit('set_trade_limit', re.data)
				this.$store.commit('set_trade_list', re.data)
			})
		},
    },
	

	destroyed() {
		clearInterval(this.timing)
		this.timing=null
	},
}
</script>

<style scoped>
.trade {
	position: relative;
}
.left {
	flex-grow: 1;
	margin: 0 10px 0 0;
	position: relative;
	min-width: 600px;
}

.Limit {
	color: #c7cce6;
	font-size: 16px;
	display: inline-block;
	height: 48px;
	line-height: 48px;
}
.Market {
	font-size: 16px;
	color: #c7cce6;
	display: inline-block;
	height: 48px;
	line-height: 48px;
	margin-left: 40px;
}
.selec {
	color: #7a98f7;
	border-bottom: 1px solid #7a98f7;
}
.Rates {
	color: #7a98f7;
	font-size: 16px;
	display: inline;
	position: absolute;
	right: 30px;
}
.formContainer {
	display: flex;
	justify-content: space-between;
	margin: 0 10px;
}
.operateCon:nth-last-of-type(1) {
	/* float: left; */
	margin-left: 30px;
}
.right {
	min-width: 30%;
}
.titleText {
	font-size: 14px;
	color: #c7cce6;
}
.titleChange {
	color: #61688a;
	font-size: 12px;
}
.inforbox {
	margin: 20px 20px 0;
	color: var(--clr0);
}
</style>
